<script setup>
import { showSuccessMsg } from "./../../../utils/msg.js"
import SelectCom from "./../SelectCom/SelectCom.vue"

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  },
  callback: {
	  type: Function,
	  default: () => {}
  },
  showChecked: {
	  type: Boolean,
	  default: false
  }
})

const copyText = (phone) => {
	const res = uni.getSystemInfoSync();
	uni.showModal({
		title: '提示',
		content: '复制拨打电话', //模板中提示的内容
		cancelText: '复制电话',
		confirmText: '拨打电话',
		success: (res) => { //点击复制内容的后调函数
			if (res.confirm) {
				if (res.platform == 'ios') { // ios系统默认有个模态框
				  uni.makePhoneCall({
					phoneNumber: phone,
					success() {
					  console.log('拨打成功了');
					},
					fail() {
					  console.log('拨打失败了');
					}
				  })
				} else { //安卓手机手动设置一个showActionSheet
				  uni.showActionSheet({
					itemList: [phone, '呼叫'],
					success: function(res) {
					  console.log(res);
					  if (res.tapIndex == 1) {
						uni.makePhoneCall({
						  phoneNumber: phone,
						})
					  }
					}
				  })
				}
				
			} else if (res.cancel) {
			  uni.setClipboardData({
			  	data: phone, //要被复制的内容
			  	success: () => { //复制成功的回调函数
			  	  showSuccessMsg('复制成功!')
			  	}
			  });
			}
		}
	});
	
}

const changeCheck = () => {
	props.callback(props.data,'check')
}

</script>

<template>
  <view class="order-item-com-box" @click="callback(data.leftText1,'click')">
		<view class="top-box">
			<view class="order_sn-box">
				<view v-if="showChecked" class="check-box" @click.stop="changeCheck">
					<SelectCom :checked="data.checked" />
				</view>
				<view class="label">订单号: </view>
				<view class="order_sn">{{data.order_sn}}</view>
			</view>
			<view class="status" :style="data.pay_statusStyle">{{data.pay_money}}元 {{data.pay_statusText}}</view>
		</view>
		<view class="center-box">
			<view class="address">
				地址: {{data.xiangzhen}}/{{data.xuexiao}}/{{data.nianji}}/{{data.banji}}
			</view>
			<view class="name-phone">
				联系: {{data.name}}-<text>{{data.phone}}</text>
			</view>
			<view class="count-box">
				牛奶配送: 已送<text style="margin-right: 30rpx;">{{data.peisong_count}}</text>剩余<text>{{data.shengyu_peisong}}</text>
			</view>
		</view>
		<view class="bottom-box">
			<view class="label">共: {{data.niunai_count}}瓶</view>
			<view class="time">{{data.createtime}}</view>
		</view>
  </view>
</template>

<style lang="scss" scoped>
.order-item-com-box {
	width: 630rpx;
	.top-box{
		@include flex(row,space-between,center);
		.order_sn-box{
			flex-grow: 1;
			@include flex(row,flex-start,center);
			@include ellipse();
		}
		.status{
			
		}
		
		.check-box{
			margin-right: 20rpx;
		}
	}
	.center-box{
		padding: 30rpx 0;
		
		.address{
			margin-bottom: 30rpx;
		}
		
		.address,.name-phone{
			display: flex;
			width: 100%;
		}
		
		.count-box{
			margin-top: 30rpx;
		}
	}
	.bottom-box{
		@include flex(row,space-between,center);
		padding-top: 30rpx;
		border-top: 1px solid var(--borderColor);
		
		.label{
			font-size: 26rpx;
		}
	}
}
</style>
